<script setup lang="ts">
import { MainLayout } from '~/components/MainLayout';
import { Title } from '~/components/Title/index';
import Imgs from '~/components/swiper/imgs.vue';
import LayoutCol from '~/components/MainLayout/layoutCol.vue';
</script>

<template>
    <MainLayout :maxwidth="false" startColor="2">
        <div class="flex">
            <img src="/contactUs/10.webp" alt="" class="w-full h-auto"></img>
        </div>
        <LayoutCol>
            <Title class="mb-0" title="Custom Embroidered Patches"
                content="The maximum number of colors a paThe maximum number of colors a paThe maximum number of colors a paThe maximum number of colors a paThe maximum number of colors a paThe maximum number of colors a paThe maximum number of colors a pa" />
        </LayoutCol>
        <LayoutCol>
            表单组件
        </LayoutCol>
        <LayoutCol>
            <Imgs :num="4"
                :list="['/contactUs/25.webp', '/contactUs/20.webp', '/contactUs/21.webp', '/contactUs/22.webp']"
                :imgAuto="false" />
            <v-btn elevation="0" color="#39c464" class="w-full! mt-4 text-white max-w-[400px]! mx-auto!">
                View All Custom Products
            </v-btn>
        </LayoutCol>
        <LayoutCol>
            <Title title="Custom Embroidered Patches" class="mb-4" />
            <div class="flex flex-row flex-wrap justify-between gap-4 w-800px mx-auto mb-20px">
                <div class="bg-[#fff] flex flex-col items-center flex-1 p-20px">
                    <img src="/contactUs/phone-call.png" alt="" class="mb-4">
                    <div class="flex-1 font-medium text-[#ccc] text-16px">
                        CALL US/Lisa
                    </div>
                    <v-btn elevation="0" color="#39c464" class="w-full! mt-4 text-white max-w-[400px]! mx-auto!">
                        15882131321
                    </v-btn>
                </div>
                <div class="bg-[#fff] flex flex-col items-center flex-1 p-20px">
                    <img src="/contactUs/live-chat.png" alt="" class="mb-4">
                    <div class="flex-1 font-medium text-[#ccc] text-16px">
                        CHAT WITH US
                    </div>
                    <v-btn elevation="0" color="#39c464" class="w-full! mt-4 text-white max-w-[400px]! mx-auto!">
                        CHAT WITH AN EXPERT
                    </v-btn>
                </div>
                <div class="bg-[#fff] flex flex-col items-center flex-1 p-20px">
                    <img src="/contactUs/3128267.png" alt="" class="mb-4">
                    <div class="flex-1 font-medium text-[#ccc] text-16px">
                        EMAIL US
                    </div>
                    <div class="flex-1 font-medium text-[#ccc] text-16px">
                        sales@nicepatches.com
                    </div>
                    <v-btn elevation="0" color="#39c464" class="w-full! mt-4 text-white max-w-[400px]! mx-auto!">
                        SEND AN EMAIL
                    </v-btn>
                </div>
            </div>
            <Title title="Custom Embroidered Patches"
                content="Our friendly team is here to help! Reach out via live chat, available from 7 AMto 5 PM PST. For inquiries outside these hours, leave us a message, and we'llget back to you promptly."
                class="mb-4" />
        </LayoutCol>
    </MainLayout>
</template>
